<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="can" width="500" height="500"></canvas>
    <script>
        var can = document.getElementById('can');
        ctx = can.getContext('2d');
        ctx.beginPath();
        ctx.arc(250, 250, 250, 0, 2 * Math.PI, true);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(312, 136, 100, 0, 2 * Math.PI, true);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(217, 100);
        ctx.quadraticCurveTo(120, 80, 20, 150);
        ctx.stroke();
        ctx.moveTo(213, 165);
        ctx.quadraticCurveTo(72, 262, 50, 398);
        ctx.stroke();
        ctx.moveTo(277, 232);
        ctx.quadraticCurveTo(244, 425, 209, 500);
        ctx.stroke();
        ctx.moveTo(362, 225);
        ctx.quadraticCurveTo(399, 375, 382, 467);
        ctx.stroke();
        ctx.moveTo(407, 175);
        ctx.quadraticCurveTo(464, 204, 500, 273);
        ctx.stroke();
        ctx.moveTo(407, 104);
        ctx.quadraticCurveTo(423, 88, 452, 99);
        ctx.stroke();
        ctx.moveTo(333, 40);
        ctx.quadraticCurveTo(331, 27, 352, 24);
        ctx.stroke();
        ctx.moveTo(261, 51);
        ctx.quadraticCurveTo(244, 23, 196, 9);
        ctx.stroke();
    </script>
</body>

</html>